<template>
  <div class="content">
    <div class="left-section">
      <Position></Position>
    </div>
    <div class="center-section">
<!--      <img src="@/assets/img/per-legend.png" alt="" class="legend-img">-->
      <PerCenter></PerCenter>
    </div>
    <div class="right-section">
      <EnvironmentObservetion></EnvironmentObservetion>
      <SpeciesObservetion></SpeciesObservetion>
    </div>
  </div>
</template>

<script>
import Position from '@/components/PermanentPlot/Position.vue'
import EnvironmentObservetion from '@/components/PermanentPlot/EnvironentObservetion.vue'
import SpeciesObservetion from '@/components/PermanentPlot/SpeciesObservetion.vue'
import PerCenter from '@/components/PermanentPlot/PerCenter.vue'
import {EventBus} from "../utils/event-bus";
export default {
  components: { Position, EnvironmentObservetion, SpeciesObservetion, PerCenter },
  data() {
    return {
      position:{lon:121.444213, lat:31.147074,zoom:16.35}
    }
  },
  mounted() {
    EventBus.$emit('set-position', this.position);
    EventBus.$emit('map-show', true);
  }
}
</script>
<style lang="scss" scoped>
.legend-img{
  position: absolute;
  bottom: 206px;
  right: 0;
  pointer-events: auto;
  z-index: 1000;
}
.left-section{
    animation: enterLeft 1s ease forwards;
}
/* 定义动画 */
@keyframes enterLeft {
    from {
        transform: translateX(-100%); /* 从顶部开始 */
    }
    to {
        transform: translateX(0); /* 移动到原始位置 */
    }
}
</style>
